<template>
  <div class="shops-detail">
    <!-- <div class="path">
      <span>资产管理</span> / {{ $route.query.ownershipName }}/
      {{ propertyinfoStorage && propertyinfoStorage.propertyName }}
    </div> -->
    <div class="shops-detail-content">
      <div class="content-name" @click="backClick">
        <i class="el-icon-arrow-left"></i>
        <div class="name">
          <span class="line"></span>
          {{ propertyinfoStorage && propertyinfoStorage.propertyName }}
        </div>
      </div>
      <div class="content-info-top">
        <div style="display: flex; align-items: center">
          <div class="title">
            <img src="../../assets/images/asset-img1.png" />
            <p>商铺基本信息</p>
          </div>
          <div class="opt" @click="editSpClick">
            <i class="el-icon-edit"></i><span>编辑</span>
          </div>
        </div>
        <div class="info-top-content">
          <div class="top-content-left">
            <div class="top-content-left-item">
              编号：<span>{{ form.propertyUnitCode }} </span>
            </div>
            <div class="top-content-left-item">
              门牌号：<span>{{ form.doorCode }} </span>
            </div>
            <!-- <div class="top-content-left-item">
              资产取得年月：<span>{{ form.propertyAcquireDate }} </span>
            </div> -->
            <div class="top-content-left-item">
              资产类型：<span>商铺 </span>
            </div>
            <div class="top-content-left-item">
              管理单位 ：<span
                >{{ propertyinfoStorage && propertyinfoStorage.manageDeptName }}
              </span>
            </div>
            <!-- <div class="top-content-left-item">
              投入使用年月：<span>{{ form.usageDate }} </span>
            </div> -->
            <div class="top-content-left-item">
              总建筑面积：<span v-if="form.buildingAreaTotal"
                >{{ form.buildingAreaTotal }}㎡
              </span>
            </div>
            <div class="top-content-left-item">
              证载面积：<span v-if="form.registerArea"
                >{{ form.registerArea }}㎡
              </span>
            </div>
            <div class="top-content-left-item">
              商铺信息:
              <span>{{ form.punitInfo }} </span>
            </div>
          </div>
          <div class="top-content-right">
            <div class="top-content-right-title">权证情况</div>
            <div
              class="top-content-right-item"
              v-if="form.landCertificateWarrantFlag === 1"
            >
              <span>土地证</span>
              <span>{{ form.landCertificateCode }}</span>
              <span
                class="download"
                v-for="(item, index) in form.landCertificateAttachList"
                :key="index"
                @click="downloadClick(item.attUrl)"
                >{{ item.originalAttName }}</span
              >
            </div>
            <div
              class="top-content-right-item"
              v-if="form.houseOwnershipWarrantFlag === 1"
            >
              <span>房产证</span>
              <span>{{ form.houseOwnershipCertificateCode }}</span>
              <span
                class="download"
                v-for="(
                  item, index
                ) in form.houseOwnershipCertificateAttachList"
                :key="index"
                @click="downloadClick(item.attUrl)"
                >{{ item.originalAttName }}</span
              >
            </div>
            <div
              class="top-content-right-item"
              v-if="form.immovablePropertyWarrantFlag === 1"
            >
              <span>不动产权证</span>
              <span>{{ form.immovablePropertyCertificateCode }}</span>
              <span
                class="download"
                v-for="(
                  item, index
                ) in form.immovablePropertyCertificateAttachList"
                :key="index"
                @click="downloadClick(item.attUrl)"
                >{{ item.originalAttName }}</span
              >
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="content-info-bottom">
        <div class="content-info-bottom-content">
          <div class="content-info-bottom-left">
            <div class="title">
              <img src="../../assets/images/asset-img1.png" />
              <p>商铺租赁评估信息</p>
            </div>
            <div class="left-button" @click="addLeaseClick">
              <i class="el-icon-plus"></i>
              <span>添加租赁信息</span>
            </div>
          </div>
          <div class="content-info-bottom-right">
            <div class="left-button" @click="historyClick">
              <i class="el-icon-time"></i>
              <span>历史记录</span>
            </div>
          </div>
        </div>
        <div
          class="info-bottom-content"
          v-for="(item, index) in leaseEvaluationList"
          :key="index"
        >
          <div class="info-bottom-content-opt">
            <div class="opt" @click="editLeaseClick(item)">
              <el-button
                slot="reference"
                type="text"
                size="small"
                icon="el-icon-edit"
                >编辑</el-button
              >
            </div>
            <div class="opt">
              <el-popconfirm
                title="是否删除当前租赁评估信息？"
                @confirm="delLeaseClick(item)"
                @onConfirm="delLeaseClick(item)"
              >
                <el-button
                  slot="reference"
                  type="text"
                  size="small"
                  class="delete"
                  icon="el-icon-delete"
                  >删除</el-button
                >
              </el-popconfirm>
            </div>
            <div class="opt">
              <el-button
                slot="reference"
                type="text"
                size="small"
                icon="el-icon-s-finance"
                @click="fileLeaseClick(item)"
                >归档</el-button
              >
            </div>
          </div>
          <div class="info-bottom-content-left">
            <div class="info-title">租赁信息</div>
            <div class="info">
              <div class="info-left">
                <div class="info-left-item">
                  租赁性质：<span
                    style="font-weight: 400"
                    v-if="item.leaseNature === 1"
                    >经营性</span
                  >
                  <span style="font-weight: 400" v-if="item.leaseNature === 0"
                    >非经营性</span
                  >
                </div>
                <div class="info-left-item">
                  租户名称：<span style="font-weight: 400">{{
                    item.leaseName
                  }}</span>
                </div>
                <div class="info-left-item">
                  租户联系方式：<span style="font-weight: 400">{{
                    item.lesseeContact
                  }}</span>
                </div>
                <div class="info-left-item">
                  租赁协议：
                  <template
                    v-if="
                      item.leaseContractAttachList &&
                      item.leaseContractAttachList.length > 0
                    "
                  >
                    <span
                      style="
                        font-weight: 400;
                        color: #0052d9;
                        text-decoration: underline;
                        cursor: pointer;
                      "
                      @click="downloadClick(v.attUrl)"
                      v-for="(v, i) in item.leaseContractAttachList"
                      :key="i"
                      >{{ v.originalAttName }}</span
                    >
                  </template>
                </div>
                <div class="info-left-item">
                  租赁面积：<span style="font-weight: 400"
                    >{{ item.leaseArea }}㎡</span
                  >
                </div>
                <div class="info-left-item">
                  租赁说明：<span style="font-weight: 400">{{
                    item.leaseInstruction
                  }}</span>
                </div>
                <div class="info-left-item">
                  租赁合同签订日期：<span
                    style="font-weight: 400; margin-right: 5px"
                    >{{ item.leaseContractBeginDate }}</span
                  >
                </div>
                <div class="info-left-item">
                  租赁合同终止日期：<span
                    style="font-weight: 400; margin-right: 5px"
                    >{{ item.leaseContractEndDate }}</span
                  >
                </div>
              </div>
              <div class="info-right" v-if="item.leaseNature === 1">
                <div class="info-right-all" style="width: 95%">
                  <p>租金 ：</p>

                  <el-table :data="item.leaseRentList" border>
                    <el-table-column
                      prop="id"
                      label="序号"
                      width="55"
                      align="center"
                    >
                      <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="rentAmount"
                      label="租金（万元/每年）"
                      align="center"
                    >
                    </el-table-column>
                    <el-table-column prop="rentFloating" label="上浮(%)">
                    </el-table-column>
                    <el-table-column label="是否缴纳租金">
                      <template slot-scope="scope">
                        <span v-if="scope.row.rentPayFlag === 1">是</span>
                        <span v-else>否</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="rentPayDate"
                      label="租金缴纳日期"
                      align="center"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="payRentDate"
                      label="租金到期日期"
                      align="center"
                    >
                    </el-table-column>
                  </el-table>
                </div>

                <div
                  class="info-right-all"
                  style="width: 95%; margin-top: 25px"
                >
                  <p>押金 ：</p>
                  <el-table :data="item.leaseDepositList" border>
                    <el-table-column
                      prop="id"
                      label="序号"
                      width="55"
                      align="center"
                    >
                      <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="payDepositDate"
                      label="押金缴纳日期"
                      align="center"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="depositAmount"
                      label="押金（万元）"
                      align="center"
                    >
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </div>
          <div class="info-bottom-content-right">
            <div class="info-title">评估信息</div>
            <div class="info">
              <div class="info-left">
                <div class="info-left-item">
                  评估报告日期 ：<span style="font-weight: 400">{{
                    item.assessReportDate
                  }}</span>
                </div>
                <div class="info-left-item">
                  评估价值时点 ：<span style="font-weight: 400">{{
                    item.assessValueDate
                  }}</span>
                </div>
                <div class="info-left-item">
                  评估价值金额 ：<span
                    v-if="item.assessValueAmount"
                    style="font-weight: 400"
                    >{{ item.assessValueAmount }} 元/天/㎡
                  </span>
                </div>
                <div class="info-left-item">
                  评估报告：
                  <template
                    v-if="
                      item.assessReportAttachList &&
                      item.assessReportAttachList.length > 0
                    "
                  >
                    <span
                      style="
                        font-weight: 400;
                        color: #0052d9;
                        text-decoration: underline;
                        cursor: pointer;
                        margin-right: 32px;
                      "
                      @click="downloadClick(v.attUrl)"
                      v-for="(v, i) in item.assessReportAttachList"
                      :key="i"
                      >{{ v.originalAttName }}</span
                    >
                  </template>
                </div>
                <div class="info-left-item">
                  其他附件：
                  <template
                    v-if="
                      item.otherAttachList && item.otherAttachList.length > 0
                    "
                  >
                    <span
                      style="
                        font-weight: 400;
                        color: #0052d9;
                        text-decoration: underline;
                        cursor: pointer;
                      "
                      @click="downloadClick(v.attUrl)"
                      v-for="(v, i) in item.otherAttachList"
                      :key="i"
                      >{{ v.originalAttName }}</span
                    >
                  </template>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div> -->
    </div>
    <add-lease-drawer
      :drawer.sync="leaseDrawer"
      :leaseInfo="leaseInfo"
      @childSpUnitEvent="getLeaseListPropertyUnit"
    ></add-lease-drawer>
    <shops-drawer
      :drawer.sync="shopsDrawer"
      :propertyObj="propertyObj"
    ></shops-drawer>
    <el-dialog title="归档" :visible.sync="fileDialogVisible" width="30%">
      <el-form ref="depositForm" :model="depositForm" label-width="150px">
        <el-form-item label="归档状态">
          <el-select
            v-model="depositForm.archivingStatus"
            placeholder="请选择"
            style="width: 80%"
          >
            <el-option
              v-for="item in archivingOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="押金退还金额(万元)">
          <el-input
            v-model="depositForm.depositRefundAmount"
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <el-form-item label="押金退还日期">
          <el-date-picker
            v-model="depositForm.depositRefundDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            style="width: 80%"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="押金退还凭证">
          <el-upload
            class="upload-demo"
            action="/admin/common/upload"
            :headers="headersAuthorization"
            :on-success="
              (response, file, fileList) =>
                handleSuccess(response, file, fileList)
            "
            :on-remove="(file, fileList) => handleRemove(file, fileList)"
            multiple
            :limit="3"
            :file-list="depositList"
          >
            <el-button size="mini" type="primary">上传图片/附件</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="押金退还说明">
          <el-input
            v-model="depositForm.depositRefundInstruction"
            type="textarea"
            :rows="2"
            style="width: 80%"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="fileDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="leaseFileClick">确 定</el-button>
      </span>
    </el-dialog>
    <el-drawer
      title="历史记录"
      :visible.sync="historyDrawer"
      direction="btt"
      size="50%"
    >
      <div
        class="info-bottom-content"
        v-for="(item, index) in historyList"
        :key="index"
        style="width: 95%; margin: 0 auto 20px"
      >
        <div class="info-bottom-content-left">
          <div class="info-title">租赁信息</div>
          <div class="info">
            <div class="info-left">
              <div class="info-left-item">
                租赁性质：<span
                  style="font-weight: 400"
                  v-if="item.leaseNature === 1"
                  >经营性</span
                >
                <span style="font-weight: 400" v-if="item.leaseNature === 0"
                  >非经营性</span
                >
              </div>
              <div class="info-left-item">
                租户名称：<span style="font-weight: 400">{{
                  item.leaseName
                }}</span>
              </div>
              <div class="info-left-item">
                租户联系方式：<span style="font-weight: 400">{{
                  item.lesseeContact
                }}</span>
              </div>
              <div class="info-left-item">
                租赁协议：
                <template
                  v-if="
                    item.leaseContractAttachList &&
                    item.leaseContractAttachList.length > 0
                  "
                >
                  <span
                    style="
                      font-weight: 400;
                      color: #0052d9;
                      text-decoration: underline;
                      cursor: pointer;
                    "
                    @click="downloadClick(v.attUrl)"
                    v-for="(v, i) in item.leaseContractAttachList"
                    :key="i"
                    >{{ v.originalAttName }}</span
                  >
                </template>
              </div>
              <div class="info-left-item">
                租赁面积：<span style="font-weight: 400"
                  >{{ item.leaseArea }}㎡</span
                >
              </div>
              <div class="info-left-item">
                租赁说明：<span style="font-weight: 400">{{
                  item.leaseInstruction
                }}</span>
              </div>
              <div class="info-left-item">
                租赁合同签订日期：<span
                  style="font-weight: 400; margin-right: 5px"
                  >{{ item.leaseContractBeginDate }}</span
                >
              </div>
              <div class="info-left-item">
                租赁合同终止日期：<span
                  style="font-weight: 400; margin-right: 5px"
                  >{{ item.leaseContractEndDate }}</span
                >
              </div>
            </div>
            <div class="info-right" v-if="item.leaseNature === 1">
              <div class="info-right-all" style="width: 95%">
                <p>租金 ：</p>

                <el-table :data="item.leaseRentList" border>
                  <el-table-column
                    prop="id"
                    label="序号"
                    width="55"
                    align="center"
                  >
                    <template slot-scope="scope">
                      {{ scope.$index + 1 }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="rentAmount"
                    label="租金（万元/每年）"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column prop="rentFloating" label="上浮(%)">
                  </el-table-column>
                  <el-table-column label="是否缴纳租金">
                    <template slot-scope="scope">
                      <span v-if="scope.row.rentPayFlag === 1">是</span>
                      <span v-else>否</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="rentPayDate"
                    label="租金缴纳日期"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="payRentDate"
                    label="租金到期日期"
                    align="center"
                  >
                  </el-table-column>
                </el-table>
              </div>

              <div class="info-right-all" style="width: 95%; margin-top: 25px">
                <p>押金 ：</p>
                <el-table :data="item.leaseDepositList" border>
                  <el-table-column
                    prop="id"
                    label="序号"
                    width="55"
                    align="center"
                  >
                    <template slot-scope="scope">
                      {{ scope.$index + 1 }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="payDepositDate"
                    label="押金缴纳日期"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="depositAmount"
                    label="押金（万元）"
                    align="center"
                  >
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
        <div class="info-bottom-content-right">
          <div class="info-title">评估信息</div>
          <div class="info">
            <div class="info-left">
              <div class="info-left-item">
                评估报告日期 ：<span style="font-weight: 400">{{
                  item.assessReportDate
                }}</span>
              </div>
              <div class="info-left-item">
                评估价值时点 ：<span style="font-weight: 400">{{
                  item.assessValueDate
                }}</span>
              </div>
              <div class="info-left-item">
                评估价值金额 ：<span
                  v-if="item.assessValueAmount"
                  style="font-weight: 400"
                  >{{ item.assessValueAmount }} 元/天/㎡
                </span>
              </div>
              <div class="info-left-item">
                评估报告：
                <template
                  v-if="
                    item.assessReportAttachList &&
                    item.assessReportAttachList.length > 0
                  "
                >
                  <span
                    style="
                      font-weight: 400;
                      color: #0052d9;
                      text-decoration: underline;
                      cursor: pointer;
                      margin-right: 32px;
                    "
                    @click="downloadClick(v.attUrl)"
                    v-for="(v, i) in item.assessReportAttachList"
                    :key="i"
                    >{{ v.originalAttName }}</span
                  >
                </template>
              </div>
              <div class="info-left-item">
                其他附件：
                <template
                  v-if="item.otherAttachList && item.otherAttachList.length > 0"
                >
                  <span
                    style="
                      font-weight: 400;
                      color: #0052d9;
                      text-decoration: underline;
                      cursor: pointer;
                    "
                    @click="downloadClick(v.attUrl)"
                    v-for="(v, i) in item.otherAttachList"
                    :key="i"
                    >{{ v.originalAttName }}</span
                  >
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import addLeaseDrawer from "./add-lease-drawer";
import shopsDrawer from "./shops-drawer.vue";
import { getToken } from "@/utils/auth";

import {
  detailBasePropertyUnit,
  leaseListPropertyUnit,
  archivingLease,
  delLease,
  leaseHistoryPropertyUnit,
} from "@/api/shops";
export default {
  components: {
    addLeaseDrawer,
    shopsDrawer,
  },
  data() {
    return {
      form: {},
      propertyinfoStorage: null,
      leaseDrawer: false,
      shopsDrawer: false,
      historyDrawer: false,
      leaseEvaluationList: [], // 租赁评估List
      leaseInfo: null,
      propertyObj: null,
      fileDialogVisible: false,
      headersAuthorization: null,
      depositList: [],
      depositForm: {
        archivingStatus: 0,
        depositRefundAmount: "",
        depositRefundDate: "",
        depositRefundAttachIds: "",
        depositRefundInstruction: "",
      },
      archivingOption: [
        {
          label: "未归档",
          value: 0,
        },
        {
          label: "已归档",
          value: 1,
        },
      ],
      historyList: [],
    };
  },
  mounted() {
    this.init();
    this.propertyinfoStorage = JSON.parse(localStorage.getItem("propertyinfo"));
    if (this.$route.query.propertyUnitId) {
      // 查看详情
      detailBasePropertyUnit(this.$route.query.propertyUnitId).then((res) => {
        this.form = Object.assign({}, res.data);
      });
      // 查看租赁评估信息
      // this.getLeaseListPropertyUnit();
    }
  },
  methods: {
    init() {
      // 获取用于上传的token
      this.headersAuthorization = {
        Authorization: "Bearer " + getToken(),
      };
    },
    historyClick() {
      this.historyDrawer = true;
      this.getLeaseHistoryPropertyUnit();
    },
    /**下载文件（权证） */
    downloadClick(url) {
      const a = document.createElement("a"); // 创建一个HTML 元素
      a.setAttribute("download", ""); //download属性
      a.setAttribute("href", url); // href链接
      a.setAttribute("target", "_blank");
      a.click(); // 自执行点击事件
    },
    backClick() {
      history.go(-1);
    },
    addLeaseClick() {
      this.leaseDrawer = true;
    },

    // 查看租赁评估信息
    getLeaseListPropertyUnit() {
      leaseListPropertyUnit(this.$route.query.propertyUnitId).then((res) => {
        this.leaseEvaluationList = Object.assign({}, res.data);
      });
    },

    // 历史记录
    getLeaseHistoryPropertyUnit() {
      leaseHistoryPropertyUnit(this.$route.query.propertyUnitId).then((res) => {
        if (res.code === 200) {
          this.historyList = Object.assign({}, res.data);
        }
      });
    },

    // 编辑
    editLeaseClick(item) {
      this.leaseInfo = Object.assign({}, item);
      this.leaseDrawer = true;
    },
    // 删除
    delLeaseClick(row) {
      delLease(row.leaseId)
        .then((res) => {
          this.getLeaseListPropertyUnit();
          this.$message.success("删除成功");
        })
        .catch(() => {
          this.$message.error("删除失败");
        });
    },
    handleSuccess(res, file, fileList) {
      if (res.code != 200) {
        this.$message.error("上传失败");
        return;
      }
      let target = fileList.map((item) => item.response.data.attId);
      if (target.length > 0) {
        this.depositForm.depositRefundAttachIds = target.join(",");
      }
    },
    handleRemove(file, fileList) {
      let target = fileList.map((item) => item.response.data.attId);
      if (target.length > 0) {
        this.depositForm.depositRefundAttachIds = target.join(",");
      }
    },
    // 归档
    fileLeaseClick(row) {
      let params = {
        archivingStatus: 1,
        leaseId: row.leaseId,
      };
      archivingLease(params)
        .then((res) => {
          this.getLeaseListPropertyUnit();
          this.$message.success("归档成功");
        })
        .catch(() => {
          this.$message.error("归档失败");
        });
    },
    // 归档
    fileLeaseClick(row) {
      this.fileDialogVisible = true;
      this.depositForm.leaseId = row.leaseId;
    },

    leaseFileClick() {
      let params = {
        archivingStatus: this.depositForm.archivingStatus,
        leaseId: this.depositForm.leaseId,
        depositRefundDate: this.depositForm.depositRefundDate,
        depositRefundAmount: this.depositForm.depositRefundAmount,
        depositRefundAttachIds: this.depositForm.depositRefundAttachIds,
        depositRefundInstruction: this.depositForm.depositRefundInstruction,
      };
      archivingLease(params)
        .then((res) => {
          this.getLeaseListPropertyUnit();
          this.$message.success("归档成功");
          this.fileDialogVisible = false;
        })
        .catch(() => {
          this.$message.error("归档失败");
        });
    },
    // 基本信息
    editSpClick() {
      this.shopsDrawer = true;
      this.propertyObj = Object.assign({}, this.form);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.shops-detail {
  .path {
    height: 40px;
    line-height: 40px;
    width: 100%;
    background: rgba($color: #fff, $alpha: 0.2);
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
    border-radius: 0px 0px 0px 0px;
    padding-left: 12px;
    span {
      font-weight: 600;
    }
  }
  .shops-detail-content {
    width: 98.5%;
    height: calc(100vh - 90px);
    margin: 15px auto 0;
    background: #ffffff;
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
    border-radius: 6px 6px 6px 6px;
    overflow-y: auto;
    .content-name {
      width: 98%;
      height: 60px;
      line-height: 60px;
      margin: 10px auto 17px;
      display: flex;
      align-items: center;
      .el-icon-arrow-left {
        width: 86px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        border-right: 1px solid #e7e7e7;
        font-size: 36px;
        cursor: pointer;
      }
      .name {
        font-size: 28px;
        height: 30px;
        line-height: 30px;
        border-left: 4px solid #0052d9;
        margin-left: 16px;
        padding-left: 16px;
        position: relative;
        .line {
          border-left: 4px solid #ffc522;
          height: 12px;
          position: absolute;
          left: -4px;
          top: 0;
        }
      }
    }
    .content-info-top {
      width: 95%;
      margin: 0 auto 15px;
      background: #ffffff;
      box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
      border-radius: 6px 6px 6px 6px;
      .info-top-content {
        display: flex;

        .top-content-left {
          display: flex;
          flex-flow: wrap;
          margin-left: 50px;
          margin-top: 15px;
          width: 60%;
          .top-content-left-item {
            width: 33%;
            padding-bottom: 25px;
          }
        }
        .top-content-right {
          flex: 1;
          .top-content-right-title {
            margin-bottom: 10px;
          }
          .top-content-right-item {
            width: 90%;
            background: linear-gradient(90deg, #fbf2d1 0%, #fff7db 100%);
            border-radius: 8px 8px 8px 8px;
            padding: 6px 25px;
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            span {
              display: flex;
              padding-left: 18px;
              width: 30%;
              &:nth-child(2) {
                width: 180px;
              }
            }
            .download {
              color: #0052d9;
              text-decoration: underline;
              cursor: pointer;
            }
          }
        }
      }
    }
    .content-info-bottom {
      width: 95%;
      margin: 0 auto 15px;
      .content-info-bottom-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .content-info-bottom-left {
        display: flex;
        align-items: center;
        .left-button {
          @include searchBtn;
          font-size: 14px;
          border-radius: 4px;
          width: 120px;
          margin-left: 40px;
        }
      }
      .content-info-bottom-right {
        display: flex;
        justify-content: flex-end;
        .left-button {
          @include searchBtn;
          font-size: 14px;
          border-radius: 4px;
          width: 100px;
        }
      }
    }

    .title {
      display: flex;
      align-items: center;
      padding-left: 24px;
      color: #000;
      font-size: 18px;
      img {
        height: 30px;
        width: 30px;
      }
    }
  }
  .opt {
    padding-left: 26px;
    color: #0052d9;
    cursor: pointer;
    span {
      font-size: 12px;
      padding-left: 3px;
    }
  }
  .info-bottom-content {
    height: auto;
    background: #fafafa;
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #dcdcdc;
    display: flex;
    position: relative;
    margin-bottom: 16px;
    .info-bottom-content-opt {
      display: flex;
      position: absolute;
      right: 16px;
      top: 16px;
    }
    .info-title {
      border-left: 4px solid #0052d9;
      margin-top: 20px;
      margin-left: 29px;
      padding-left: 5px;
    }
    .info-bottom-content-left {
      width: 50%;
      border-right: 1px solid #e7e7e7;
    }
    .info-bottom-content-right {
      width: 50%;
    }
    .info {
      display: flex;
      padding-bottom: 25px;
      .info-left {
        margin-left: 29px;
        margin-top: 32px;
        margin-right: 15px;
        .info-left-item {
          padding-bottom: 24px;
        }
      }
      .info-right {
        flex: 1;
        .info-right-all {
          display: flex;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.shops-detail {
  .el-table td {
    padding: 5px 0;
  }
  .el-drawer.btt {
    overflow-y: auto;
  }
}
</style>